<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model='firstName'>
        <input type="text" v-model='lastName'>
        <input type="text" v-model='fullName'>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                firstName:'firstName',
                lastName:'lastName',
                fullName:''
            },
            // computed:{
            //     fullName:function() {
            //         return (this.firstName+'-'+this.lastName)
            //     }
            // }
            /* computed:{
                fullName:{
                    get() {
                        return (this.firstName+'-'+this.lastName)
                    },
                    set(newVal) {
                        const [firstName,lastName] = newVal.split('-')
                        this.firstName = firstName
                        this.lastName = lastName
                    }
                }
            } */
            watch:{
                firstName(newVal,oldVal) {
                    this.fullName = newVal
                    +'-'+this.lastName
                },
                lastName(newVal,oldVal) {
                    this.fullName = this.firstName+'-'+newVal
                },
                fullName(newVal,oldVal) {
                    const [firstName,lastName] = newVal.split('-')
                        this.firstName = firstName
                        this.lastName = lastName
                }

            }
        })
    </script>
</body>
</html>